<template>
  <div class="airspaceApplication">
    <div class="container">
      <div class="up-container">
        <el-form
          :model="queryParams"
          ref="queryRef"
          :inline="true"
          v-show="showSearch"
        >
          <el-form-item
            :label="$t('airspaceSetup.name') + ':'"
            prop="airspaceName"
          >
            <el-input
              v-model="queryParams.airspaceName"
              :placeholder="$t('airspaceSetup.dimensionName')"
              maxlength="20"
              clearable
              style="width: 270px; height: 40px"
            />
          </el-form-item>
          <el-form-item
            :label="$t('airspaceSetup.type') + ':'"
            prop="airSpaceType"
          >
            <el-select
              class="selectAirSpace"
              v-model="queryParams.airTypeId"
              :placeholder="$t('airspaceSetup.change')"
              clearable
              style="width: 270px; height: 40px"
            >
              <el-option
                v-for="dict in airSpaceTypeList"
                :key="dict.airTypeId"
                :label="dict.airTypeName"
                :value="dict.airTypeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item
              :label="$t('airspaceSetup.time') + ':'"
              prop="airSpaceTime"
          >
            <el-date-picker
                v-model="queryParams.airSpaceTime"
                type="datetimerange"
                :start-placeholder="$t('airspaceSetup.startTime')"
                :end-placeholder="$t('airspaceSetup.endTime')"
                format="YYYY-MM-DD HH:mm"
                @change="getAirSpaceTime"
                :default-time="defaultTime"
                style="width: 270px; height: 34px"
            />
          </el-form-item>
          <el-form-item
            :label="$t('airspaceSetup.status') + ':'"
            prop="airSpaceStatus"
          >
            <el-select
              v-model="queryParams.status"
              :placeholder="$t('airspaceSetup.change')"
              clearable
              style="width: 270px; height: 40px"
            >
              <el-option
                v-for="dict in airSpaceStatusList"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <div class="buttonStyle">
            <el-button
              class="searchButton"
              type="primary"
              icon="Search"
              @click="handleQuery"
              >{{ $t("airspaceSetup.search") }}</el-button
            >
            <el-button
              class="refreshButton"
              icon="Refresh"
              @click="resetQuery"
              >{{ $t("airspaceSetup.reset") }}</el-button
            >
          </div>
          <div class="batch-operation">
            <el-button class="createAirspace" icon="Plus" @click="handleAdd">{{
              $t("airspaceSetup.addAirspace")
            }}</el-button>
          </div>
        </el-form>
      </div>
      <div class="down-container">
        <el-table
          :data="tableData"
          class="codeTable"
          :header-cell-style="headClass"
          stripe
          :border="true"
          style="width: 100%"
          max-height="60vh"
        >
          <el-table-column
            :label="$t('airspaceSetup.SerialNumber')"
            type="index"
            :index="indexMethod"
            width="85"
            :fixed="true"
            align="center"
          />
          <el-table-column
            :label="$t('airspaceSetup.operate')"
            align="center"
            class-name="small-padding fixed-width"
            width="200"
            :fixed="true"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                @click="handleDetail(scope.row)"
                v-hasPermi="['airspace:airspaceSetup:detail']"
                >{{ $t("airspaceSetup.detail") }}</el-button
              >
              <el-button
                link
                type="primary"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['airspace:airspaceSetup:edit']"
                >{{ $t("airspaceSetup.update") }}</el-button
              >
              <el-button
                link
                type="primary"
                @click="handleOnOff(scope.row)"
                v-if="scope.row.status !== 3"
              >
                <div style="color: #409eff" v-if="scope.row.status === 2">
                  {{ $t("airspaceSetup.Enable") }}
                </div>
                <div
                  style="color: red"
                  v-if="
                    scope.row.status === 0 ||
                    scope.row.status === 1 ||
                    scope.row.status === 3
                  "
                >
                  {{ $t("airspaceSetup.Deactivate") }}
                </div>
              </el-button>
              <el-button
                link
                type="primary"
                @click="handleDelete(scope.row)"
                style="color: red"
                >{{ $t("airspaceSetup.delete") }}</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            :fixed="true"
            :label="$t('airspaceSetup.tableStatus')"
            width="180"
            prop="status"
            align="center"
          >
            <template #default="{ row }">
              <span class="tag success" v-if="row.status === 0">{{
                $t("airspaceSetup.effective")
              }}</span>
              <span class="tag warning" v-if="row.status === 1">{{
                $t("airspaceSetup.notYetEffective")
              }}</span>
              <span class="tag info" v-if="row.status === 2">{{
                $t("airspaceSetup.Disabled")
              }}</span>
              <span class="tag info" v-if="row.status === 3">{{
                $t("airspaceSetup.Expired")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('airspaceSetup.name')"
            prop="airspaceName"
            :show-overflow-tooltip="true"
            min-width="180"
            align="center"
          />
          <el-table-column
            :label="$t('airspaceSetup.type')"
            prop="airTypeName"
            :show-overflow-tooltip="true"
            width="180"
            align="center"
          />
          <el-table-column
            :label="
              $t('airspaceSetup.AirspaceBottomHeight') +
              '(' +
              $t('airspaceSetup.metre') +
              ')'
            "
            prop="lowHeight"
            width="240"
            align="center"
          />
          <el-table-column
            :label="
              $t('airspaceSetup.AirspaceCeilingHeight') +
              '(' +
              $t('airspaceSetup.metre') +
              ')'
            "
            prop="topHeight"
            width="240"
            align="center"
          />
          <el-table-column
            :label="$t('airspaceSetup.timeEffect')"
            prop="startTime"
            min-width="300"
            align="center"
          >
            <template #default="{ row }">
              <span v-if="row.endTime !== '2999-12-12 23:59:59'">{{
                dataFormat(row.startTime, "YYYY-MM-DD HH:mm") +
                " ~ " +
                dataFormat(row.endTime, "YYYY-MM-DD HH:mm")
              }}</span>
              <span v-else>{{
                dataFormat(row.startTime, "YYYY-MM-DD HH:mm") + " 起"
              }}</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          class="pagination"
          v-show="total > 0"
          :total="total"
          v-model:page="queryCurrent.pageNum"
          v-model:limit="queryCurrent.pageSize"
          @pagination="getListFun"
          style="margin-top: 12px"
        />
      </div>
      <el-dialog
        v-model="dialogVisible"
        title=""
        width="26%"
        :show-close="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        center
        top="1vh"
      >
        <img src="@/assets/images/deleteWarning.png" alt="" />
        <template #footer>
          <div class="dialog-footer">
            <div style="margin-bottom: 30px; font-size: 14px; color: #333333">
              <span>{{ $t("airspaceSetup.determineDelete") }}</span>
              <span style="color: rgba(255, 195, 0, 1)">{{
                selectedObj.airspaceName
              }}</span>
              <span>{{ $t("airspaceSetup.doubt") }}</span>
            </div>
            <el-button @click="dialogVisible = false">{{
              $t("airspaceSetup.cancellation")
            }}</el-button>
            <el-button
              style="background: #2bc17b; color: #ffffff"
              @click="deletevisibleHandle()"
            >
              {{ $t("airspaceSetup.determine") }}
            </el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog
        v-model="enableVisible"
        title=""
        width="26%"
        :show-close="true"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        center
        top="1vh"
      >
        <img src="@/assets/images/prohibit.png" alt="" />
        <template #footer>
          <div class="dialog-footer">
            <div style="margin-bottom: 30px; font-size: 14px; color: #333333">
              <span
                >{{ $t("airspaceSetup.determineDeactivate")
                }}{{ onOffStatus }}</span
              >
              <span style="color: rgba(255, 195, 0, 1)">{{ onOffName }}</span>
              <span>{{ $t("airspaceSetup.doubt") }}</span>
            </div>
            <el-button @click="enableVisible = false">{{
              $t("airspaceSetup.cancellation")
            }}</el-button>
            <el-button
              style="background: #2bc17b; color: #ffffff"
              @click="enableVisibleFun()"
            >
              {{ $t("airspaceSetup.determine") }}
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup name="airsapceSetup">
import { onMounted, reactive, ref, toRefs } from "vue";
import { useRouter } from "vue-router";
import {
  getAirspaceType,
  getAirspaceStatus,
  getList,
  onOff,
  settingsEdit,
  getDetailInfo,
} from "@/api/airSpace/airSpaceSetUp";
import { ElMessage } from "element-plus";
import { dataFormat } from "@/utils/format";

const router = useRouter();
const route = useRouter();
const showSearch = ref(true);
const total = ref(0);
const airSpaceTypeList = ref([]);
const airSpaceStatusList = ref([]);
const dialogVisible = ref(false);
const enableVisible = ref(false);
const selectedObj = ref({});
const onOffObj = ref({});
const onOffName = ref("");
const onOffStatus = ref("");
import { getCurrentInstance } from "vue";
const { $t } = getCurrentInstance().proxy;
const defaultTime = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
];
function headClass({ row, rowIndex }) {
  // if (rowIndex === 0) {
  //   return {background:'#CCCCCC !important',color:'#333333',fontSize: '16px', fontWeight: '400'}
  // }
}

const tableData = ref([]);

const data = reactive({
  queryParams: {
    airspaceName: "",
    airTypeId: "",
    status: "",
    airSpaceTime: null,
    startTime: null,
    endTime: null,
  },
  queryCurrent: {
    pageNum: 1,
    pageSize: 10,
  },
});

const { queryParams, queryCurrent } = toRefs(data);

function indexMethod(index) {
  // 当前页码
  const currentPage = queryCurrent.value.pageNum;
  // 每页显示的数据条数
  const pageSize = queryCurrent.value.pageSize;
  // 上一页最后一个编号
  const prevLastIndex = (currentPage - 1) * pageSize;
  // 当前行的实际索引
  const truelndex = index + prevLastIndex;
  // 如果当前行的索引大于等于当前页的最大索引，
  // 则使用当前行的实际索引，否则使用当前行的原始索引
  return truelndex >= currentPage * pageSize
    ? truelndex
    : index + prevLastIndex + 1;
}

const handleQuery = () => {
  getListFun();
};

const resetQuery = () => {
  queryParams.value = {
    airspaceName: "",
    airTypeId: "",
    status: "",
    airSpaceTime: null,
    startTime: null,
    endTime: null,
  };
  queryCurrent.value.pageNum = 1;
  queryCurrent.value.pageSize = 10;
  getListFun();
};

function getListFun() {
  console.log(queryParams.value);
  let params = {
    ...queryParams.value,
    airTypeId:
      queryParams.value.airTypeId == "" ? null : queryParams.value.airTypeId,
    status: queryParams.value.status == "" ? null : queryParams.value.status,
  };
  getList(queryCurrent.value, params).then((response) => {
    if (response.code === 200) {
      tableData.value = response.rows;
      console.log(tableData.value);
      total.value = response.total;
    }
  });
}

const handleAdd = () => {
  router.push({
    name: "airSpaceAdd",
    query: { refresh: true, openType: "add" },
  });
};

const handleDetail = (row) => {
  console.log(row.airspaceId)
  // enterType: 0 详情
  router.push({
    name: "airSpaceAdd",
    query: { airspaceId: row.airspaceId, enterType: 0, openType: "detail" },
  });
};

const handleUpdate = (row) => {
  console.log(row.airspaceId)
  // enterType: 1 编辑
  router.push({
    name: "airSpaceAdd",
    query: { airspaceId: row.airspaceId, enterType: 1, openType: "edit" },
  });
};

const handleOnOff = (row) => {
  onOffObj.value = row;
  onOffName.value = row.airspaceName;
  enableVisible.value = true;
  if (row.status === 2) {
    onOffStatus.value = $t("airspaceSetup.Enable");
  } else {
    onOffStatus.value = $t("airspaceSetup.Deactivate");
  }
};

const handleDelete = (row) => {
  selectedObj.value = row;
  dialogVisible.value = true;
};

// 删除
async function deletevisibleHandle() {
  let obj = {};
  await getDetailInfo(selectedObj.value.airspaceId).then((res) => {
    if (res.code === 200) {
      console.log(res.data);
      obj = res.data;
    }
  });
  let params = {
    ...obj,
    status: "-1",
  };
  await settingsEdit(params).then((res) => {
    if (res.code === 200) {
      ElMessage({
        message: $t("airspaceSetup.deleteSuccess"),
        type: "success",
      });
      dialogVisible.value = false;
      getListFun();
    }
  });
}

function enableVisibleFun() {
  let params = {
    airspaceId: onOffObj.value.airspaceId,
    status: onOffObj.value.status === 2 ? 6 : 2,
  };
  onOff(params).then((response) => {
    if (response.code === 200) {
      enableVisible.value = false;
      getListFun();
    }
  });
}

// 空域类型下拉框数据获取
function getAirSpaceTypeList() {
  getAirspaceType().then((response) => {
    if (response.code === 200) {
      airSpaceTypeList.value = response.data;
      console.log(airSpaceTypeList.value);
      airSpaceTypeList.value.unshift({
        airTypeName: "全部",
        airTypeId: "",
      });
    }
  });
}

function getAirSpaceStatusList() {
  getAirspaceStatus("sys_airspace_status").then((response) => {
    if (response.code === 200) {
      airSpaceStatusList.value = response.data;
      airSpaceStatusList.value.unshift({
        dictLabel: "全部",
        dictValue: "",
      });
    }
  });
}

function getAirSpaceTime(val) {
  console.log(val);
  if (val === null) {
    queryParams.value.airSpaceTime = null;
    queryParams.value.startTime = null;
    queryParams.value.endTime = null;
  } else {
    queryParams.value.startTime = getTime(val[0]);
    queryParams.value.endTime = getTime(val[1]);
  }
}

// 格式化日期格式
function getTime(value) {
  // 计算日期相关值
  let time = new Date(value);
  let Y = time.getFullYear();
  let M = time.getMonth() + 1;
  let D = time.getDate();
  let h = time.getHours();
  let m = time.getMinutes();
  // let s = time.getSeconds();
  let week = time.getDay();
  return (
    Y +
    "-" +
    (M < 10 ? "0" + M : M) +
    "-" +
    (D < 10 ? "0" + D : D) +
    " " +
    (h < 10 ? "0" + h : h) +
    ":" +
    (m < 10 ? "0" + m : m)
  );
}

onMounted(() => {
  getAirSpaceTypeList();
  getAirSpaceStatusList();
  getListFun();
});
</script>
<style lang="scss">
.airspaceApplication {
  .codeTable {
    width: 100%;
  }
  .codeTable .el-table__body-wrapper tbody tr td:nth-child(5) {
    //text-align: left;
  }
  .apply-dialog .el-dialog__header {
    display: none !important;
  }
}
</style>
<style lang="scss" scoped>
.airspaceApplication {
  width: 100%;
  height: 100%;

  //:deep .el-popper.is-pure{
  //  inset: 213px auto auto 1253px;
  //}

  .container {
    position: relative;
    width: calc(100% - 40px);
    height: 92%;
    margin: 0 20px 20px;
    border-radius: 10px;
    background: white;
  }

  .up-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px 0 30px;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-color: #fff;

    :deep .el-form .el-form-item__label {
      font-weight: 400;
      font-size: 14px;
      color: #666666;
    }

    .searchButton {
      width: 90px;
      height: 34px;
      border-radius: 4px;
      color: #ffffff;
      background-color: #409eff;
      font-size: 14px;
      margin: 0;
    }

    .refreshButton {
      width: 90px;
      height: 34px;
      border-radius: 4px;
      color: #ffffff;
      font-size: 14px;
      background: #ffb700;
      margin: 0;
    }

    .buttonStyle {
      position: absolute;
      right: 0px;
      top: -45px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 200px;
      height: 40px;
    }

    .batch-operation {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: absolute;
      right: 220px;
      top: -45px;
      height: 40px;
    }
    .createAirspace {
      width: 120px;
      height: 34px;
      color: #ffffff;
      border-radius: 4px;
      background: #2bc17b;
      border: 1px solid #2bc17b;
      font-size: 14px;
    }

    :deep .el-form--inline .el-form-item {
      display: inline-flex;
      vertical-align: middle;
      margin-right: 40px;
      margin-bottom: 19px;
      align-items: center;
    }

    :deep .el-form-item__content {
      width: auto;
      height: 40px;
      border-radius: 4px;
      background: rgb(255, 255, 255);
      border: 1px solid rgb(220, 223, 230);
    }

    :deep .el-input__wrapper {
      box-shadow: none;
      height: 34px;
      // width: 100% !important;
    }

    :deep .el-input {
      width: 270px;
      height: 34px;
    }

    :deep .el-select {
      width: 270px;
      height: 34px;
      //display: flex;
      //align-items: center;
      :deep .el-input {
        height: 34px;
      }
    }
  }

  .down-container {
    //margin: 20px 0 0;
    //background-color: #FFFFFF;
    //border-radius: 4px;
    //height: 73%;

    .tag {
      display: inline-block;
      width: 80px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 15px;
      color: rgba(153, 153, 153, 1);
      border: 1px solid rgba(153, 153, 153, 1);
    }

    .tag.warning {
      color: rgba(255, 149, 18, 1);
      border: 1px solid rgba(255, 149, 18, 1);
    }

    .tag.success {
      color: rgba(43, 193, 123, 1);
      border: 1px solid rgba(43, 193, 123, 1);
    }
  }

  .pagination {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
  }

  //:deep .el-table::before {
  //  height: 0px;
  //}
  //
  //:deep .el-table__footer-wrapper, .el-table__header-wrapper {
  //  background-color: #F4F4F4;
  //  height: 56px;
  //}
  //
  //:deep .el-table__header {
  //  height: 100%;
  //  background-color: #F4F4F4;
  //}
  //
  //:deep .el-table .el-table__cell {
  //  text-align: center;
  //}
  //
  //:deep .el-table__row {
  //  height: 50px;
  //}

  :deep .el-dialog:not(.is-fullscreen) {
    margin-top: 36vh !important;
  }

  :deep .el-dialog__body {
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 0px calc(var(--el-dialog-padding-primary) + 5px) 20px !important;
  }

  :deep .el-dialog__footer {
    padding-top: 0;
  }

  .dialog-footer {
    :deep .el-button:nth-child(1) {
      border-color: #ededed;
    }

    :deep .el-button {
      width: 81px;
      height: 32px;
      font-size: 12px;
    }
  }
}
</style>
